<template>
  <div class="pagecontent">
    <div class="commonheader border">
      <i class="iconback"
         @click="backClick"></i>
      <h3>估值数据</h3>
    </div>
    <!-- <div class="btn"><a class="u-button" @click="collectClick">收藏</a></div> -->
    <div class="muicontent">
      <div class="goodsinfo">
        <h3>{{goodsName}}</h3>
        <ul class="infolist">
          <li><em>奢侈品商收货价</em><span>￥{{priceArray[0]}}</span></li>
          <li><em>个人交易价</em><span>￥{{priceArray[1]}}</span></li>
          <li><em>奢侈品商零售价</em><span>￥{{priceArray[2]}}</span></li>
        </ul>
      </div>
      <div class="infodetail">
        <h3>详情</h3>
        <ul class="detailist">
          <li><em>品牌</em><span>{{this.$store.state.goodsBrand}}</span></li>
          <li><em>系列</em><span>{{goodsSeries}}</span></li>
          <li><em>编码</em><span>{{goodsCode||'--'}}</span></li>
          <li><em>成色</em><span>{{goodsCS}}</span></li>
          <!-- <li><em>收包时间</em><span>2019.01.01</span></li> -->
        </ul>
      </div>
      <div class="pricesave">
        <h3>添加收包备注</h3>
        <div class="bgcolor">
          <div class="inputbox"><i></i><input type="number"
                   v-model="inputprice"
                   placeholder="请输入收包价格，用于个人记账" /></div>
          <a class="u-button"
             @click="collectClick">保存</a>
        </div>
      </div>
    </div>
    <!--保存成功-->
    <div class="savesuccess"
         v-show="successflag">
      <i class="iconstar"></i>
      <p>保存成功</p>
    </div>
    <!--输入价格-->
    <div class="pricetip"
         v-show="priceflag">
      <i class="icontip"></i>
      <p>请输入价格</p>
    </div>
  </div>
</template>

<script>
import Bus from '../../../static/js/bus'
import { setTimeout } from 'timers'
export default {
  name: 'valuationData',
  data () {
    return {
      successflag: false,
      priceflag: false,
      inputprice: '',
      priceArray: [],
      goodsCode: '',
      goodsName: '',
      goodsSeries: '',
      goodsCS: '',
      picture_url: '',
      serialNumber: ''
    }
  },
  beforeCreate () {
    Bus.$on('precdata', (data) => {
      console.log(data)
      this.priceArray = data.data
      this.goodsName = data.product.name
      this.goodsSeries = data.product.series
      this.goodsCS = data.oldAndNew
      this.picture_url = data.product.url
      this.serialNumber = data.product.serialNumber
    })
  },
  created () {
    Bus.$on('sendgoodsCode', (data) => {
      this.goodsCode = data
    })
  },
  methods: {
    backClick () {
      this.$router.push('/Home')
    },
    collectClick () {
      if (this.inputprice !== '') {
        this.loadList()
      } else {
        this.priceflag = true
        setTimeout(() => {
          this.priceflag = false
        }, 2000)
      }
    },
    loadList () {
      this.$http.post(`${this.baseUrl.addAccountBook}`,
        { username: this.$store.state.username,
          itemName: this.goodsName,
          collectionPrice: this.inputprice,
          brandId: this.$store.state.brandId,
          serial: this.goodsSeries,
          code: this.goodsCode,
          colour: this.goodsCS,
          picture_url: this.picture_url,
          serialNumber: this.serialNumber }).then((res) => {
        if (res.data.code === 200) {
          this.successflag = true
          setTimeout(() => {
            this.successflag = false
            this.$store.commit('setBrandId', '')
            this.$router.push({ name: 'mycheck' })
          }, 2000)
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.muicontent
  background #f6f5f5
  position absolute
  top 0.9rem
  bottom 0
  left 0
  right 0
  overflow-y auto
.goodsinfo
  padding 0.3rem
  background #fff
  h3
    font-size 0.32rem
    font-family '微软雅黑'
    color #333
    line-height 1.3
    margin-bottom 0.35rem
    font-weight bold
  .infolist
    li
      list-style none
      font-size 0.32rem
      line-height 0.55rem
      em
        font-style normal
        display inline-block
        width 3.4rem
      span
        color #d21733
        display inline-block
.pricesave
  background #f6f5f5
  h3
    font-size 0.32rem
    color #666
    background #f6f5f5
    line-height 0.7rem
    padding-left 0.3rem
  .bgcolor
    background #fff
    padding 0.26rem 0 0.26rem 0.24rem
  .inputbox
    position relative
    display inline-block
    margin-right 0.15rem
    i
      display inline-block
      width 0.33rem
      height 0.36rem
      background url('../../../static/images/brand/price.png') no-repeat
      background-size 100% 100%
      position absolute
      left 0.16rem
      top 0.18rem
    input
      width 5.6rem
      height 0.7rem
      line-height 0.7rem
      background #f6f5f5
      border-radius 0.06rem
      box-sizing border-box
      padding 0 0.1rem 0 0.8rem
  .u-button
    display inline-block
    width 1.2rem
    height 0.7rem
    line-height 0.7rem
    text-align center
    border-radius 0.06rem
    background #d21733
    color #fff
.infodetail
  background #fff
  h3
    font-size 0.32rem
    color #666
    background #f6f5f5
    line-height 0.7rem
    padding-left 0.3rem
  .detailist
    padding 0.26rem 0.1rem 0.2rem 0.3rem
    li
      list-style none
      font-size 0.28rem
      color #333
      line-height 0.5rem
      em
        display inline-block
        width 1.8rem
      span
        display inline-block
.btn
  position fixed
  height 0.9rem
  line-height 0.9rem
  left 1.3rem
  right 1.3rem
  bottom 0.1rem
  .u-button
    font-size 0.32rem
    color #fff
    text-align center
    border-radius 0.08rem
    display block
    background #d21733
.savesuccess
  width 3.12rem
  height 3.12rem
  border-radius 0.1rem
  background rgba(0, 0, 0, 0.7)
  position absolute
  left 50%
  top 50%
  margin -1.56rem 0 0 -1.56rem
  .iconstar
    display block
    width 1.2rem
    height 1.14rem
    background url('../../../static/images/brand/star.png') no-repeat
    background-size 100% 100%
    margin 0.7rem auto 0.5rem auto
  p
    font-size 0.36rem
    color #fff
    text-align center
.pricetip
  width 3.12rem
  height 3.12rem
  border-radius 0.1rem
  background rgba(0, 0, 0, 0.7)
  position absolute
  left 50%
  top 50%
  margin -1.56rem 0 0 -1.56rem
  .icontip
    display block
    width 1.2rem
    height 1.14rem
    background url('../../../static/images/brand/state03.png') no-repeat
    background-size 100% 100%
    margin 0.7rem auto 0.5rem auto
  p
    font-size 0.36rem
    color #fff
    text-align center
</style>
